import { useState, useEffect } from 'react';
import styled, { keyframes } from 'styled-components';

// 定义加载动画
const spin = keyframes`
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
`;

// 表格样式
const StyledTable = styled.div`
  display: flex;
  flex-direction: column;
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
  width: 100%;
  max-width: 800px;
  margin: 20px auto;
`;

// 表格头部样式（固定）
const TableHeader = styled.div`
  display: flex;
  background-color: #f5f5f5;
  padding: 10px 15px;
  font-weight: bold;
  border-bottom: 1px solid #ddd;
  position: sticky;
  top: 0;
  z-index: 1;
`;

// 表格内容区域样式（固定高度，可滚动）
const TableContent = styled.div<{isLoading:boolean}>`
  max-height: 400px; // 固定高度
  overflow-y: auto; // 超过高度显示滚动条
  ${({ isLoading }) => isLoading && `
    filter: blur(2px);
    pointer-events: none; // 防止用户交互
  `}
`;

// 表格行样式
const TableRow = styled.div`
  display: flex;
  padding: 10px 15px;
  border-bottom: 1px solid #eee;
  
  &:last-child {
    border-bottom: none;
  }
`;

// 表格单元格样式
const TableCell = styled.div`
  flex: 1;
  padding: 0 5px;
`;

// 加载遮罩样式
const LoadingOverlay = styled.div`
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.7);
  z-index: 2;
`;

// 加载指示器样式
const Spinner = styled.div`
  width: 30px;
  height: 30px;
  border: 3px solid rgba(0, 0, 0, 0.1);
  border-top-color: #007bff;
  border-radius: 50%;
  animation: ${spin} 1s linear infinite;
  margin-bottom: 10px;
`;

// 定义数据项的类型
type TableDataItem = {
    id: number;
    name: string;
    email: string;
    status: string;
};

// 主表格组件
const TableWithLoading = () => {
    const [isLoading, setIsLoading] = useState(true);
    const [data, setData] = useState<TableDataItem[]>([]);

    // 模拟API请求
    useEffect(() => {
        const fetchData = async () => {
            // 模拟API延迟
            await new Promise(resolve => setTimeout(resolve, 2000));

            // 模拟返回的数据
            const mockData = Array.from({ length: 20 }, (_, i) => ({
                id: i + 1,
                name: `User ${i + 1}`,
                email: `user${i + 1}@example.com`,
                status: i % 2 === 0 ? 'Active' : 'Inactive',
            }));

            setData(mockData);
            setIsLoading(false);
        };

        fetchData();
    }, []);

    return (
        <StyledTable>
            <TableHeader>
                <TableCell>ID</TableCell>
                <TableCell>Name</TableCell>
                <TableCell>Email</TableCell>
                <TableCell>Status</TableCell>
            </TableHeader>

            <div style={{ position: 'relative' }}>
                <TableContent isLoading={isLoading}>
                    {data.map((item: TableDataItem) => (
                        <TableRow key={item.id}>
                            <TableCell>{item.id}</TableCell>
                            <TableCell>{item.name}</TableCell>
                            <TableCell>{item.email}</TableCell>
                            <TableCell>{item.status}</TableCell>
                        </TableRow>
                    ))}
                </TableContent>

                {/* 只在加载状态下显示遮罩 */}
                {isLoading && (
                    <LoadingOverlay>
                        <Spinner />
                        <span>Loading data...</span>
                    </LoadingOverlay>
                )}
            </div>
        </StyledTable>
    );
};

export default TableWithLoading;
